<template> 
    <div class="article-detail"> 
        <div class="head">{{titleName}}</div>
        <div class="art-info clear-both">
            <span class="date">{{detailObj.create_time}}</span>
            <span><i class="iconfont iconfont-shurukuangchakanmima"></i>&nbsp;&nbsp;{{detailObj.records}}</span> 
            <div class="collect text-center float-right" @click="collectChange(detailObj)">
                <span class="iconfont-shoucang1 iconfont" v-if="!shoucang"></span>
                <span class="iconfont-shoucang iconfont" v-else></span>
            </div>
        </div>
        <div class="content"> 
            <wxParse :content="detailObj.content"/>
        </div>
    </div> 
</template>

<script> 
import wxParse from 'mpvue-wxparse'
import * as api from '@/utils/api' 
export default { 
    onLoad(opt){ 
        wx.setNavigationBarTitle({ title: opt.title });
        this.getDateDetail(opt.typeId); 
        this.typeId=opt.typeId;
        this.titleName=opt.title;
    },
    data () {
        return {
            typeId:'',
            titleName:'',
            detailObj:[], 
            shoucang:false,
        }
    },
    components: {
        wxParse
    },
    methods:{
        getDateDetail(id){
            let vm = this;
            let body={
                model: "Points",
                orderBy:"create_time",
                condition: {
                    parent_id:id
                },
                with:{ 
                    "0":"tabs", 
                },
            }
            api.getInfoById(body).then(res=>{
                if(res.data.code==200){ 
                    vm.detailObj=res.data.data;
                    res.data.data.is_collect==0?vm.shoucang=false:vm.shoucang=true;
                }; 
            })
        },
        //收藏
        collectChange(item){
            let vm = this;
            let body={
                model: "Records",
                data:{
                    uid: wx.getStorageSync('u_id'),      
                    resource_id: item.id,   
                    type:1,        
                    resource_type: item.tabs.type,   
                    category:"1" 
                } 
            }; 
            if(vm.shoucang){
                api.deleteData(body).then(res=>{
                    if(res.data.code==200){
                        vm.getDateDetail(vm.typeId);
                        wx.showToast({icon:'none', title: '取消成功' })
                    }
                });
            }else{
                api.createSite(body).then(res=>{
                    if(res.data.code==200){
                        vm.getDateDetail(vm.typeId);
                        wx.showToast({icon:'none', title: '收藏成功' })
                    }
                });
            }
            
        },
    }, 
}

</script>
<style lang="scss">
.article-detail{
    padding:20rpx;
    box-sizing:border-box;
    background:#fff;
    .head{
        color:#111;
        font-size:34rpx;
    }
    .art-info{
        line-height:40rpx;
        font-size:28rpx;
        color:#949494;
        margin:20rpx 0;
        .date{
            margin-right:40rpx;
        }
        .iconfont{
            font-size:24rpx;
        } 
    }
    .content{
        font-size:28rpx;
        color:#333;
    }
    .collect{
        background:#fff;
        margin-right:30rpx;
        span{ 
            color:#E05957;
            font-size:40rpx;
            font-weight:bold;
        } 
    }
} 
</style>
